<template>
  <ul class="foot-nav">
    <!-- <router-link :to="item.path" tag="li" v-for="item in  navList" :key="item.id">
			<span :class="['iconfont',item.icon]"></span>
			<h3>{{item.title}}</h3>
		</router-link> -->
    <van-tabbar v-model="active" route>
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/sort">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" to="/shopp">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/user">我的</van-tabbar-item>
    </van-tabbar>
  </ul>
</template>

<script>
export default {
  name: "FooterNav",
  data() {
    return {
      navList: [
        {
          path: "/home",
          id: 1,
          icon: "icon-1",
          title: "首页",
        },
        {
          path: "/sort",
          id: 2,
          icon: "icon-leimupinleifenleileibie2",
          title: "分类",
        },
        {
          path: "/shopp",
          id: 3,
          icon: "icon-gouwuchekong",
          title: "购物车",
        },
        {
          path: "/my",
          id: 4,
          icon: "icon-wode",
          title: "我的",
        },
      ],
      active: 0,
    };
  },
};
</script>

<style>
/* .foot-nav {
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px red solid;
} */
li {
  height: 1rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
h3 {
  font-size: 14px;
}
</style>
